.banner {
  background-image: url('/banner.png');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left top;

  .item {
    width: 10%;
    height: 100%;
    background: rgba(101, 213, 240, 15%);
    box-shadow: 0 10px 70px 0 rgba(68, 197, 228, 20%) inset;
    backdrop-filter: blur(35px);
  }
}

.descRef1 {
  color: rgba(0, 0, 0, 50%);
}
// .banner-rtl {
//   transform: rotateY(180deg);
// }

.hr {
  width: 100%;
  height: 1px;
  border-top: 1px dashed #d6dce0;
}

.button {
  margin: 32px 24px 80px;
  border: 0.737px solid #44c5e4;
  color: #44c5e4;
  width: 200px;
  height: 48px;
  font-size: 18px;
  font-weight: 700;
  display: inline-block;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  cursor: pointer;
  overflow: hidden;
}

.button-bg {
  position: absolute;
  left: -200px;
  top: 0;
  width: 100%;
  height: 48px;
  border-radius: 24px;
  background-color: #44c5e4;
  transition: all 0.2s;
  z-index: 10;
}

.rtl-button-row {
  transform: rotateY(180deg);
}

.button-arrow {
  display: block;
}

.button-arrow1 {
  display: none;
}

.button:hover {
  color: #fff;
}

.button:hover .button-bg {
  left: 0;
}

.button:hover .button-arrow {
  display: none;
}

.button:hover .button-arrow1 {
  display: block;
}
